<style  lang="stylus" >
  html,body, #app{
    height: 100%;
  }
</style>
<style  lang="stylus" scoped>

  .ul {

  }
  .li {
    
    span{
      border-bottom:3px solid red;
    }
  }
</style>

<template>
  <div class="flex-column-start " style="height:100%;">

    <div>
      <ul class="flex-row-between" style="height: 100%;width:100%;">
        <li 
          v-for="(item,index) in arr" 
          :key="index" 
          class="flex-column-center li"
          @click="fn"
          style="width:25%;"
          >
          <img src="../../static/new/yuanquan.png" />
          <span>
              {{ item }}
          </span>
        </li>
      </ul>
    </div>

    <div style="height: 100%;" class="flex-column-start">
      <li 
        v-for="(item,index) in arr" 
        :key="index" 
        class="flex-column-center li"
        @click="fn"
        style="width:25%;"
        >
        <img src="../../static/new/yuanquan.png" />
        <span>
            {{ item }}
        </span>
      </li>
      <li class="flex-num-one" style="background-color: red;">
        123
        q44
      </li>
    </div>

  </div>
</template>

<script>
  import api from "@/fetch/api";
  import ComHeader from "@/common/ComHeader";
  import Scroll from "@/base/scroll/scroll";
  import Loading from "@/base/loading/loading";
  import axios from "axios";
  import { Indicator, Toast } from "mint-ui";
  document.querySelector("#app").style.height="100%"
  export default {
    name: "order",
    data() {
      return {
        arr: [1, 22, 3, 4222, 52222, 622,1231213,44641]
      };
    },
    components: {
      Scroll,
      ComHeader,
      Loading,
      Indicator,
      Toast
    },
    created() {},
    methods: {}
  };
</script>

<style lang="stylus" scoped></style>
